<template>
  <div class="container">
    <el-dialog
      :title="`${msg}文章`"
      :visible="isShow"
      @close="handleCancel"
      width="800px"
    >
      <el-form
        :model="addForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        inline
        class="addForm"
      >
        <el-form-item label="文章标题：" prop="title">
          <el-input
            v-model="addForm.title"
            placeholder="请输入文章标题"
          ></el-input>
        </el-form-item>
        <el-form-item
          class="textarea-item"
          label="文章内容："
          prop="articleBody"
        >
          <!-- <el-input v-model="addForm.articleBody"></el-input> -->
          <!-- 富文本框 -->
          <quillEditor
            class="textarea"
            :options="options"
            v-model="addForm.articleBody"
          />
        </el-form-item>
        <el-form-item label="视频地址：">
          <el-input
            v-model="addForm.videoURL"
            placeholder="请输入视频地址"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleCancel">取 消</el-button>
        <el-button type="primary" @click="handleOk">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { quillEditor } from 'vue-quill-editor' // 调用编辑器
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
// 引入接口
import { add, update } from '@/api/hmmm/articles.js'
export default {
  name: 'ArticleAdd',
  props: {
    isShow: Boolean,
    currentArt: {
      type: Object,
      required: false
    }
  },
  components: {
    quillEditor
  },
  computed: {
    msg () {
      return this.currentArt ? '修改' : '新增'
    }
  },
  data () {
    return {
      options: {
        placeholder: '请输入文章内容',
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike']
            [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }]
            ['blockquote', 'code-block'], // 引用，代码块
            ['image', 'link'] // 链接、图片、视频-----['link', 'image', 'video']
          ]
        }
      },
      addForm: {
        id: null,
        title: '',
        articleBody: '',
        videoURL: null
      },
      rules: {
        title: [
          {
            required: true,
            message: '请输入文章标题',
            trigger: 'blur'
          }
        ],
        articleBody: [
          {
            required: true,
            message: '请输入文章内容',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  watch: {
    isShow (value) {
      if (value && this.currentArt) {
        // this.addForm.id = this.currentArt.id
        // this.addForm.title = this.currentArt.title
        // this.addForm.articleBody = this.currentArt.articleBody
        // this.addForm.videoURL = this.currentArt.videoURL
        this.addForm = this.currentArt
      }
    }
  },
  methods: {
    // 点击确定按钮
    async handleOk () {
      await this.$refs.ruleForm.validate()
      try {
        this.currentArt ? await update(this.addForm) : await add(this.addForm)
        this.$message.success(`${this.msg}文章成功`)
        this.handleCancel()
        this.$emit('getList')
      } catch (e) {
        this.$message.error(`${this.msg}文章失败`)
      }
    },
    handleCancel () {
      this.$emit('update:isShow', false)
      this.$refs.ruleForm.resetFields()
      this.addForm = {
        id: null,
        title: '',
        articleBody: '',
        videoURL: null
      }
    }
  }
}
</script>

<style scoped lang="less">
::v-deep .el-form-item {
  display: flex;
  width: 100%;
}
::v-deep .el-form-item__content {
  flex: 1;
}
.addForm {
  .textarea {
    height: 230px;
  }
  .textarea-item {
    height: 280px;
  }
}
.dialog-footer {
  text-align: right;
}
</style>
